<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="upload/starTechnology.png">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 链入外部ckeditor.js -->
    <!-- <script src="https://cdn.ckeditor.com/ckeditor5/37.1.0/classic/ckeditor.js"></script> -->
    <!-- 防止垃圾机房没网联入本地 -->
    <script src="ckeditor/ckeditor.js"></script>
    <!-- 引入bootstrap样式 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- 引入自己的样式 -->
    <link rel="stylesheet" href="css/content.css">
    <!-- 引入jquery js 文件 -->
    <script src="bootstrap/js/jQuery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <title>星瀚科技后台</title>
</head>

<body>
    <!-- 导航条 -->
    <nav class="navbar navbar-default navbar-inverse">
        <div class="container-fluid">
            <!-- 图标 -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="javascript:;">
                    <img alt="Brand" src="upload/logo.svg">
                </a>
            </div>
            <!-- 功能条 -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">星瀚科技后台管理系统 <span class="sr-only">(current)</span></a></li>



                    <li><a href="manage.html" class="glyphicon glyphicon-home">后台管理</a></li>
                    <li><a href="javascript:;" target="_self" class="glyphicon glyphicon-list neirong">内容管理</a></li>
                    <li><a href="label.html" class="glyphicon glyphicon-tags">标签管理</a></li>


                    <!-- 新标签页面 -->
                    <!-- Nav tabs -->

                    <!-- <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                            data-toggle="tab">Home</a></li>
                    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
                            data-toggle="tab">Profile</a></li>
                    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab"
                            data-toggle="tab">Messages</a></li>
                    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab"
                            data-toggle="tab">Settings</a></li> -->


                    <!-- Tab panes -->
                    <!-- <div class="tab-content">
                        <div role="tabpanel" class="tab-pane fade in active" id="home">12313213</div>
                        <div role="tabpanel" class="tab-pane fade" id="profile">12313213</div>
                        <div role="tabpanel" class="tab-pane fade" id="messages">12313213</div>
                        <div role="tabpanel" class="tab-pane fade" id="settings">12313213</div>
                    </div> -->


                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle  glyphicon glyphicon-user" data-toggle="dropdown"
                            role="button" aria-haspopup="true" aria-expanded="false">用户管理 <span
                                class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">用户1</a></li>
                            <li><a href="#">用户2</a></li>
                            <li><a href="#">用户3</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">添加用户</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">删除用户</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false"><img src="images/user.jpg" alt="..." class="img-circle userimg">王志斌
                            <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">修改头像</a></li>
                            <li><a href="#">修改昵称</a></li>
                            <li><a href="#">修改信息</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                    <li><a href="managerlogin.html" class="glyphicon glyphicon-off">退出</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 内容 -->
    <div class="container">
        <div class="row col-md-2">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne" style="background-color: skyblue;">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                                aria-expanded="true" aria-controls="collapseOne">
                                鲜花管理
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
                        aria-labelledby="headingOne">
                        <div class="panel-body">
                            鲜花类型添加
                        </div>
                        <div class="panel-body">
                            鲜花类型管理
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingTwo">
                        <h4 class="panel-title">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                                href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                鲜花添加
                            </a>
                        </h4>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree">
                        <h4 class="panel-title">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                                href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                鲜花分类
                            </a>
                        </h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="right col-md-10 item">
            <h3>鲜花管理</h3>
            <div>

                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                            data-toggle="tab">鲜花类型添加</a></li>
                    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
                            data-toggle="tab">鲜花类型管理</a></li>
                    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab"
                            data-toggle="tab">鲜花添加</a></li>
                    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab"
                            data-toggle="tab">鲜花分类</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane  fade in active" id="home">
                        <form>
                            <div class="form-group">
                                <label for="exampleInputEmail1">类别名称</label>
                                <input type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入类别名称">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">父类别</label>
                                <input type="text" class="form-control" id="exampleInputPassword1"
                                    placeholder="==根类型==">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputFile">显示图片</label>
                                <!-- <input type="file" id="exampleInputFile"> -->
                                <button type="button" class="btn btn-info">上传文件（可选）</button>
                                <button type="button" class="btn btn-success">点击下载</button>
                                <button type="button" class="btn btn-warning">取消文件</button>
                                <p class="help-block">点击上传文件按钮选择文件</p>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">排列权重</label>
                                <input type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入排列权重">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">页面类型</label>
                                <input type="text" class="form-control" id="exampleInputEmail1" placeholder="列表页">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">外部链接</label>
                                <input type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入外部链接">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">打开方式</label>
                                <input type="text" class="form-control" id="exampleInputEmail1" placeholder="自刷新">
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" checked="checked"> 可见&emsp;&emsp;&emsp;
                                    <input type="checkbox"> 不可见
                                </label>
                            </div>
                            <!-- 面板 -->
                            <div class="panel panel-default">
                                <div class="panel-heading">填写备注</div>
                                <div class="panel-body">
                                    <div class="editor"></div>
                                    <script>
                                        ClassicEditor.create(document.querySelector('.editor'));
                                    </script>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="profile">
                        <!-- 文章搜索框 -->
                        <div style="overflow: hidden;">
                            <form class="navbar-form navbar-left" role="search">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="请输入鲜花类型名">
                                </div>
                                <button type="submit" class="btn btn-default btn-success">搜索</button>
                            </form>
                        </div>
                        <!-- 批量删除 批量不可见 -->
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">
                                    <button type="button" class="btn btn-warning">批量不可见</button>
                                    <button type="button" class="btn btn-danger">批量删除</button>
                                </h3>
                            </div>
                            <div class="panel-body">
                                共有9条。
                            </div>
                        </div>
                        <!-- 表格 -->
                        <table class="table table-bordered" style="text-align: center;">
                            <thead>
                                <tr class="danger">
                                    <td>
                                        <input type="checkbox" id="j_cbALL" />
                                    </td>
                                    <td>分类名称</td>
                                    <td>排列权重</td>
                                    <td>页面类型</td>
                                    <td>打开方式</td>
                                    <td>是否可见</td>
                                    <td>操作</td>
                                </tr>
                            </thead>
                            <tbody id="j_tbs">
                                <tr>
                                    <td>
                                        <input type="checkbox" />
                                    </td>
                                    <td>爱情鲜花</td>
                                    <td>250</td>
                                    <td>列表页</td>
                                    <td>新窗口</td>
                                    <td>可见</td>
                                    <td>
                                        <button type="button" class="btn btn-warning">不可见</button>
                                        <button type="button" class="btn btn-danger">删除</button>
                                    </td>
                                </tr>
                                <tr class="info">
                                    <td>
                                        <input type="checkbox" />
                                    </td>
                                    <td>友情鲜花</td>
                                    <td>250</td>
                                    <td>列表页</td>
                                    <td>新窗口</td>
                                    <td>可见</td>
                                    <td>
                                        <button type="button" class="btn btn-warning">不可见</button>
                                        <button type="button" class="btn btn-danger">删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox" />
                                    </td>
                                    <td>生日鲜花</td>
                                    <td>250</td>
                                    <td>列表页</td>
                                    <td>新窗口</td>
                                    <td>可见</td>
                                    <td>
                                        <button type="button" class="btn btn-warning">不可见</button>
                                        <button type="button" class="btn btn-danger">删除</button>
                                    </td>
                                </tr>
                                <tr class="info">
                                    <td>
                                        <input type="checkbox" />
                                    </td>
                                    <td>道歉鲜花</td>
                                    <td>250</td>
                                    <td>列表页</td>
                                    <td>新窗口</td>
                                    <td>可见</td>
                                    <td>
                                        <button type="button" class="btn btn-warning">不可见</button>
                                        <button type="button" class="btn btn-danger">删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox" />
                                    </td>
                                    <td>商务鲜花</td>
                                    <td>250</td>
                                    <td>列表页</td>
                                    <td>新窗口</td>
                                    <td>可见</td>
                                    <td>
                                        <button type="button" class="btn btn-warning">不可见</button>
                                        <button type="button" class="btn btn-danger">删除</button>
                                    </td>
                                </tr>
                                <tr class="info">
                                    <td>
                                        <input type="checkbox" />
                                    </td>
                                    <td>蓝色星辰</td>
                                    <td>250</td>
                                    <td>列表页</td>
                                    <td>新窗口</td>
                                    <td>可见</td>
                                    <td>
                                        <button type="button" class="btn btn-warning">不可见</button>
                                        <button type="button" class="btn btn-danger">删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox" />
                                    </td>
                                    <td>蓝色梦想</td>
                                    <td>250</td>
                                    <td>列表页</td>
                                    <td>新窗口</td>
                                    <td>可见</td>
                                    <td>
                                        <button type="button" class="btn btn-warning">不可见</button>
                                        <button type="button" class="btn btn-danger">删除</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <script>
                            $(function () {
                                $('.btn').click(function () {
                                    var flag = window.confirm('确定删除吗？');
                                    if (flag) {
                                        $(this).parents('tr').hide();
                                    }
                                })
                            })
                        </script>
                        <script>
                            //1.全选和取消全选的做法：让下面所有复选框的checked属性（选中状态）跟随 全选按钮即可
                            //获取元素
                            var j_cbALL = document.getElementById('j_cbALL');
                            var j_tbs = document.getElementById('j_tbs').getElementsByTagName('input');
                            //注册事件
                            j_cbALL.onclick = function () {
                                //this.checked 它可以得到当前复选框的选中状态 如果是true就是选中，如果是fasle就是未选中
                                for (var i = 0; i < j_tbs.length; i++) {
                                    j_tbs[i].checked = this.checked;
                                }
                            }
                            //2.下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要检查是否全部选中
                            for (var i = 0; i < j_tbs.length; i++) {
                                j_tbs[i].onclick = function () {
                                    //flag控制全选按钮是否选中
                                    var flag = true;
                                    //每次点击，都要检查是否全部选中
                                    for (var i = 0; i < j_tbs.length; i++) {
                                        if (!j_tbs[i].checked) {
                                            flag = false;
                                            break;
                                        }
                                    }
                                    j_cbALL.checked = flag;
                                }
                            }

                        </script>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="messages">
                        <form>
                            <div class="form-group">
                                <label for="exampleInputEmail1">鲜花类别</label>
                                <input type="text" class="form-control" id="exampleInputEmail1"
                                    placeholder="==星辰之恋永恒之心==">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">标题</label>
                                <input type="text" class="form-control" id="exampleInputPassword1" placeholder="请输入标题">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputFile">显示图片</label>
                                <!-- <input type="file" id="exampleInputFile"> -->
                                <button type="button" class="btn btn-info">上传文件（可选）</button>
                                <button type="button" class="btn btn-success">点击下载</button>
                                <button type="button" class="btn btn-warning">取消文件</button>
                                <p class="help-block">点击上传文件按钮选择文件</p>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">页面类型</label>
                                <input type="text" class="form-control" id="exampleInputEmail1" placeholder="内容页">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">外部链接</label>
                                <input type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入外部链接">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">打开方式</label>
                                <input type="text" class="form-control" id="exampleInputEmail1" placeholder="自刷新">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">作者</label>
                                <input type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入作者">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">来源</label>
                                <input type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入来源">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">编辑</label>
                                <input type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入编辑">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">发布日期</label>
                                <input type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入发布日期">
                            </div>
                            <!-- 面板 -->
                            <div class="panel panel-default">
                                <div class="panel-heading">鲜花备注</div>
                                <div class="panel-body">
                                    <div class="edi">
                                    </div>
                                    <script>
                                        ClassicEditor.create(document.querySelector('.edi'))
                                    </script>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="settings">
                        <!-- 文章搜索框 -->
                        <div style="overflow: hidden;">
                            <form class="navbar-form navbar-left" role="search">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="请输入鲜花类型名">
                                </div>
                                <button type="submit" class="btn btn-default btn-success">搜索</button>
                            </form>
                        </div>
                        <!-- 批量删除 批量不可见 -->
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">
                                    <button type="button" class="btn btn-warning">批量隐藏</button>
                                    <button type="button" class="btn btn-danger">批量删除</button>
                                </h3>
                            </div>
                            <div class="panel-body">
                                共有9条。
                            </div>
                        </div>
                        <!-- 表格 -->
                        <table class="table table-bordered" style="text-align: center;">
                            <thead>
                                <tr class="danger">
                                    <td>
                                        <input type="checkbox" id="j_cbALL" />
                                    </td>
                                    <td>分类名称</td>
                                    <td>排列权重</td>
                                    <td>页面类型</td>
                                    <td>打开方式</td>
                                    <td>是否可见</td>
                                    <td>操作</td>
                                </tr>
                            </thead>
                            <tbody id="j_tbs">
                                <tr>
                                    <td>
                                        <input type="checkbox" />
                                    </td>
                                    <td>星辰之恋</td>
                                    <td>250</td>
                                    <td>列表页</td>
                                    <td>新窗口</td>
                                    <td>可见</td>
                                    <td>
                                        <button type="button" class="btn btn-warning">隐藏</button>
                                        <button type="button" class="btn btn-danger">删除</button>
                                    </td>
                                </tr>
                                <tr class="success">
                                    <td>
                                        <input type="checkbox" />
                                    </td>
                                    <td>蓝色星辰</td>
                                    <td>250</td>
                                    <td>列表页</td>
                                    <td>新窗口</td>
                                    <td>可见</td>
                                    <td>
                                        <button type="button" class="btn btn-warning">隐藏</button>
                                        <button type="button" class="btn btn-danger">删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox" />
                                    </td>
                                    <td>蓝色梦想</td>
                                    <td>250</td>
                                    <td>列表页</td>
                                    <td>新窗口</td>
                                    <td>可见</td>
                                    <td>
                                        <button type="button" class="btn btn-warning">隐藏</button>
                                        <button type="button" class="btn btn-danger">删除</button>
                                    </td>
                                </tr>
                                <tr class="success">
                                    <td>
                                        <input type="checkbox" />
                                    </td>
                                    <td>特别的你</td>
                                    <td>250</td>
                                    <td>列表页</td>
                                    <td>新窗口</td>
                                    <td>可见</td>
                                    <td>
                                        <button type="button" class="btn btn-warning">隐藏</button>
                                        <button type="button" class="btn btn-danger">删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox" />
                                    </td>
                                    <td>告白气球</td>
                                    <td>250</td>
                                    <td>列表页</td>
                                    <td>新窗口</td>
                                    <td>可见</td>
                                    <td>
                                        <button type="button" class="btn btn-warning">隐藏</button>
                                        <button type="button" class="btn btn-danger">删除</button>
                                    </td>
                                </tr>
                                <tr class="success">
                                    <td>
                                        <input type="checkbox" />
                                    </td>
                                    <td>年年不忘</td>
                                    <td>250</td>
                                    <td>列表页</td>
                                    <td>新窗口</td>
                                    <td>可见</td>
                                    <td>
                                        <button type="button" class="btn btn-warning">隐藏</button>
                                        <button type="button" class="btn btn-danger">删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox" />
                                    </td>
                                    <td>蓝色记忆</td>
                                    <td>250</td>
                                    <td>列表页</td>
                                    <td>新窗口</td>
                                    <td>可见</td>
                                    <td>
                                        <button type="button" class="btn btn-warning">隐藏</button>
                                        <button type="button" class="btn btn-danger">删除</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
        <!-- 分页 -->
        <div class="row">
            <nav aria-label="...">
                <ul class=" pagination">
                    <li><a href="#">Previous</a></li>
                    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                    <li class="disabled"><a href="#">2 <span class="sr-only">(current)</span></a></li>
                    <li class="disabled"><a href="#">3<span class="sr-only">(current)</span></a></li>
                    <li class="disabled"><a href="#">4 <span class="sr-only">(current)</span></a></li>
                    <li class="disabled"><a href="#">5 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Next</a></li>
                </ul>
            </nav>
        </div>
    </div>
</body>

</html>